<template>
  <div class="user-management-container">
    <h1>用户管理</h1>
    
    <div class="action-bar">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索用户名、ID或邮箱..." 
          @input="handleSearch"
        />
        <button class="search-button">
          <i class="icon-search"></i>
        </button>
      </div>
      
      <div class="filter-buttons">
        <button @click="filterByType('all')" :class="{ active: currentFilter === 'all' }">全部</button>
        <button @click="filterByType('普通用户')" :class="{ active: currentFilter === '普通用户' }">普通用户</button>
        <button @click="filterByType('VIP用户')" :class="{ active: currentFilter === 'VIP用户' }">VIP用户</button>
        <button @click="filterByType('商家用户')" :class="{ active: currentFilter === '商家用户' }">商家用户</button>
      </div>
      
      <button class="add-button" @click="showAddUserModal">
        <i class="icon-add"></i> 添加用户
      </button>
    </div>
    
    <div class="users-table">
      <table>
        <thead>
          <tr>
            <th>用户ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>手机号</th>
            <th>用户类型</th>
            <th>注册时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in paginatedUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.type }}</td>
            <td>{{ user.registerDate }}</td>
            <td>
              <span :class="['status-badge', user.status === '正常' ? 'status-active' : 'status-inactive']">
                {{ user.status }}
              </span>
            </td>
            <td class="actions">
              <button class="edit-btn" @click="editUser(user)">编辑</button>
              <button class="delete-btn" @click="deleteUser(user)">删除</button>
              <button 
                :class="['status-btn', user.status === '正常' ? 'disable-btn' : 'enable-btn']" 
                @click="toggleUserStatus(user)"
              >
                {{ user.status === '正常' ? '禁用' : '启用' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    </div>
    
    <!-- 添加/编辑用户模态框 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>{{ isEditing ? '编辑用户' : '添加用户' }}</h2>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="currentUser.username">
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input type="email" v-model="currentUser.email">
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input type="text" v-model="currentUser.phone">
          </div>
          <div class="form-group">
            <label>用户类型</label>
            <select v-model="currentUser.type">
              <option value="普通用户">普通用户</option>
              <option value="VIP用户">VIP用户</option>
              <option value="商家用户">商家用户</option>
              <option value="企业用户">企业用户</option>
            </select>
          </div>
          <div class="form-group">
            <label>状态</label>
            <select v-model="currentUser.status">
              <option value="正常">正常</option>
              <option value="禁用">禁用</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="save-btn" @click="saveUser">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserManagement',
  data() {
    return {
      users: [
        { id: 'U001', username: '张三', email: 'zhangsan@example.com', phone: '13800138001', type: '普通用户', registerDate: '2023-01-15', status: '正常' },
        { id: 'U002', username: '李四', email: 'lisi@example.com', phone: '13800138002', type: 'VIP用户', registerDate: '2023-02-20', status: '正常' },
        { id: 'U003', username: '王五', email: 'wangwu@example.com', phone: '13800138003', type: '商家用户', registerDate: '2023-03-10', status: '正常' },
        { id: 'U004', username: '赵六', email: 'zhaoliu@example.com', phone: '13800138004', type: '普通用户', registerDate: '2023-03-15', status: '禁用' },
        { id: 'U005', username: '钱七', email: 'qianqi@example.com', phone: '13800138005', type: 'VIP用户', registerDate: '2023-04-01', status: '正常' },
        { id: 'U006', username: '孙八', email: 'sunba@example.com', phone: '13800138006', type: '企业用户', registerDate: '2023-04-10', status: '正常' },
        { id: 'U007', username: '周九', email: 'zhoujiu@example.com', phone: '13800138007', type: '普通用户', registerDate: '2023-04-15', status: '正常' },
        { id: 'U008', username: '吴十', email: 'wushi@example.com', phone: '13800138008', type: '商家用户', registerDate: '2023-04-20', status: '禁用' },
        { id: 'U009', username: '郑十一', email: 'zheng11@example.com', phone: '13800138009', type: '普通用户', registerDate: '2023-05-01', status: '正常' },
        { id: 'U010', username: '王十二', email: 'wang12@example.com', phone: '13800138010', type: 'VIP用户', registerDate: '2023-05-10', status: '正常' },
        { id: 'U011', username: '李十三', email: 'li13@example.com', phone: '13800138011', type: '普通用户', registerDate: '2023-05-15', status: '正常' },
        { id: 'U012', username: '赵十四', email: 'zhao14@example.com', phone: '13800138012', type: '商家用户', registerDate: '2023-05-20', status: '正常' }
      ],
      currentPage: 1,
      itemsPerPage: 10,
      searchQuery: '',
      currentFilter: 'all',
      showModal: false,
      isEditing: false,
      currentUser: {
        id: '',
        username: '',
        email: '',
        phone: '',
        type: '普通用户',
        registerDate: '',
        status: '正常'
      }
    };
  },
  computed: {
    filteredUsers() {
      let result = this.users;
      
      // 应用类型筛选
      if (this.currentFilter !== 'all') {
        result = result.filter(user => user.type === this.currentFilter);
      }
      
      // 应用搜索筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(user => 
          user.username.toLowerCase().includes(query) || 
          user.id.toLowerCase().includes(query) || 
          user.email.toLowerCase().includes(query)
        );
      }
      
      return result;
    },
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredUsers.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredUsers.length / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    },
    filterByType(type) {
      this.currentFilter = type;
      this.currentPage = 1; // 重置到第一页
    },
    handleSearch() {
      this.currentPage = 1; // 搜索时重置到第一页
    },
    showAddUserModal() {
      this.isEditing = false;
      this.currentUser = {
        id: 'U' + (this.users.length + 1).toString().padStart(3, '0'),
        username: '',
        email: '',
        phone: '',
        type: '普通用户',
        registerDate: new Date().toISOString().split('T')[0],
        status: '正常'
      };
      this.showModal = true;
    },
    editUser(user) {
      this.isEditing = true;
      this.currentUser = { ...user }; // 复制用户对象，避免直接修改
      this.showModal = true;
    },
    deleteUser(user) {
      if (confirm(`确定要删除用户 ${user.username} 吗？`)) {
        const index = this.users.findIndex(u => u.id === user.id);
        if (index !== -1) {
          this.users.splice(index, 1);
          alert('用户已删除');
        }
      }
    },
    toggleUserStatus(user) {
      user.status = user.status === '正常' ? '禁用' : '正常';
    },
    closeModal() {
      this.showModal = false;
    },
    saveUser() {
      if (!this.currentUser.username || !this.currentUser.email) {
        alert('用户名和邮箱不能为空');
        return;
      }
      
      if (this.isEditing) {
        // 更新现有用户
        const index = this.users.findIndex(u => u.id === this.currentUser.id);
        if (index !== -1) {
          this.users[index] = { ...this.currentUser };
          alert('用户信息已更新');
        }
      } else {
        // 添加新用户
        this.users.push({ ...this.currentUser });
        alert('新用户已添加');
      }
      
      this.closeModal();
    }
  }
}
</script>

<style scoped>
.user-management-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 14px;
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}

.icon-search:before {
  content: "🔍";
}

.icon-add:before {
  content: "+";
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.filter-buttons button {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filter-buttons button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.add-button {
  padding: 8px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.users-table {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

tr:hover {
  background-color: #f9f9f9;
}

.status-badge {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
}

.status-active {
  background-color: #e8f5e9;
  color: #388e3c;
}

.status-inactive {
  background-color: #ffebee;
  color: #d32f2f;
}

.actions {
  display: flex;
  gap: 5px;
}

.actions button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background-color: #2196f3;
  color: white;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.status-btn {
  background-color: #9e9e9e;
  color: white;
}

.enable-btn {
  background-color: #4caf50;
}

.disable-btn {
  background-color: #ff9800;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination button {
  margin: 0 5px;
  width: 36px;
  height: 36px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  padding: 8px 15px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .search-box {
    width: 100%;
  }
  
  .filter-buttons {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  
  .add-button {
    margin-top: 10px;
  }
}
</style>